<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="ptb20 plr30">

				<view class="box1">
					<view class="inp_item flex-box">
						<view class="left">姓名</view>
						<input type="text" placeholder="请输入" v-model="formData.username" class="flex-grow-1 inp"
							placeholder-class="colb" />
					</view>
					<view class="inp_item flex-box">
						<view class="left flex-grow-1">性别</view>
						<view class="switch ml40" :class="item.id==formData.gender?'ac':''"
							@click="bindGenderChange(item.id)" v-for="(item,index) in genders">{{item.name}}</view>
					</view>
					<view class="inp_item flex-box">
						<view class="left">手机号</view>
						<input type="number" maxlength="11" placeholder="请输入" v-model="formData.mobile"
							class="flex-grow-1 inp" placeholder-class="colb" />
					</view>
					<view class="inp_item flex-box">
						<view class="left">身份证号</view>
						<input type="idcard" maxlength="18" placeholder="请输入" v-model="formData.idcard"
							class="flex-grow-1 inp" placeholder-class="colb" />
					</view>
					<view class="inp_item">
						<multi-select class="inp_item" :items="areas" @change="bindDistrictChange" id_key="id"
							name_key="name" max_level="3" :value="formData.district_id">
							<view class="inp_item flex-box">
								<view class="left flex-grow-1 pr30">所在区/县</view>
								<view class="fs30" :class="[!areaName?'colb':'col3']">{{!areaName?'请选择':areaName}}
								</view>
							</view>
						</multi-select>
					</view>
					<view class="inp_item flex-box">
						<view class="left">详细地址</view>
						<input type="text" placeholder="请输入" v-model="formData.address" class="flex-grow-1 inp"
							placeholder-class="colb" />
					</view>
				</view>
				<view class="box mt20">
					<view class="inp_item">
						<multi-select class="inp_item" :items="areas" @change="bindFavDistrictChange" id_key="id"
							name_key="name" max_level="3" :value="formData.fav_district_id">
							<view class="inp_item flex-box">
								<view class="flex-grow-1 pr30 fs30 col3">*工作区域</view>
								<view class="fs30" :class="[!favAreaName?'colb':'col3']">
									{{!favAreaName?'请选择':favAreaName}}</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item">
						<multi-select class="inp_item" :items="taskCategories" @change="bindCategoryChange" id_key="id"
							name_key="name" max_level="1" :value="formData.category_id">
							<view class="inp_item flex-box">
								<view class="flex-grow-1 pr30 fs30 col3">*从事工种</view>
								<view class="fs30"
									:class="[!getListItemById(taskCategories,formData.category_id)?'colb':'col3']">
									{{getListItemAttrById(taskCategories,formData.category_id,'name','请选择')}}</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item flex-box">
						<view class="pr30 fs30 col3">工价</view>
						<input type="number" placeholder="请输入" v-model="formData.fav_salary"
							class="flex-grow-1 tr fs30 col3" placeholder-class="colb" />
					</view>
					<view class="inp_item">
						<multi-select class="inp_item" :items="educationLevels" @change="bindEducationLevelChange"
							id_key="id" name_key="name" :value="formData.education_id">
							<view class="inp_item flex-box">
								<view class="flex-grow-1 pr30 fs30 col3">学历</view>
								<view class="fs30"
									:class="[!getListItemById(educationLevels,formData.education_id)?'colb':'col3']">
									{{getListItemAttrById(educationLevels,formData.education_id,'name','请选择')}}</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item">
						<multi-select class="inp_item" :items="taskProperties" @change="bindPropertyChange" id_key="id"
							name_key="name" :value="formData.properties_id">
							<view class="inp_item flex-box">
								<view class="flex-grow-1 pr30 fs30 col3">工作性质</view>
								<view class="fs30"
									:class="[!getListItemById(taskProperties,formData.properties_id)?'colb':'col3']">
									{{getListItemAttrById(taskProperties,formData.properties_id,'name','请选择')}}</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item flex-box">
						<view class="flex-grow-1 pr30 fs30 col3">有无培训需求</view>
						<view class="flex-box ml20" v-for="(item,index) in isTrain" @click="bindTrainChange(item.id)">
							<image :src="iconPath(item.id==formData.is_train?'choose_sc.png':'choose_uc.png')"
								mode="aspectFill" class="ico36"></image>
							<view class="pl15 col3 fs30">{{item.name}}</view>
						</view>
					</view>
					<view class="inp_item">
						<multi-select class="inp_item" :items="workExperience" @change="bindWorkExperienceChange"
							id_key="id" name_key="name" :value="formData.work_experience_id">
							<view class="inp_item flex-box">
								<view class="flex-grow-1 pr30 fs30 col3">工作年限</view>
								<view class="fs30"
									:class="[!getListItemById(workExperience,formData.work_experience_id)?'colb':'col3']">
									{{getListItemAttrById(workExperience,formData.work_experience_id,'name','请选择')}}
								</view>
							</view>
						</multi-select>
					</view>

				</view>
				<view class="box mt20">
					<view class="col3 fs30 pt30">自我描述</view>
					<textarea placeholder="请输入" class="textarea" v-model="formData.summary"
						placeholder-class="colb"></textarea>
				</view>
				<view class="mt35 col9 fs24">提交信息即表示同意<text class="col4" @click="onSinglepage('service')">《用户服务协议》</text>和<text
						class="col4" @click="onSinglepage('secret')">《隐私政策》</text></view>
				<view class="btn" @click="bindSubmit()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	export default {
		components: {
			multiSelect
		},
		data() {
			return {
				
				genders: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				areas: [],
				areaName: '',
				favAreaName: '',
				taskCategories: [],
				educationLevels: [],
				workExperience: [],
				taskProperties: [],
				isTrain: [{
					id: 1,
					name: '有'
				}, {
					id: 2,
					name: '无'
				}],
				formData: {
					username: '',
					gender: 0,
					mobile: '',
					idcard: '',
					district_id: '',
					address: '',
					fav_district_id: '',
					category_id: 0,
					fav_salary: '',
					education_id: 0,
					properties_id: 0,
					is_train: 0,
					work_experience_id: 0,
					summary: ''
				},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			this.getTaskIntention();
			//区县
			this.$util.getAreasTree(false).then(areas => {
				this.areas = areas;
			})
			//工种
			this.$util.getTastCategory(false).then(items => {
				this.taskCategories = items;
			});
			//学历
			this.$util.getEducationLevels(false).then(items => {
				items.splice(0, 1);
				this.educationLevels = items;
			});
			//工作年限
			this.$util.getWorkExperienceOptions(false).then(items => {
				items.splice(0, 1);
				this.workExperience = items;
			})
			this.$util.getTastProperties(false).then(items => {
				this.taskProperties = items;
			})
		},
		methods: {
			getTaskIntention(){
				this.$core.post({
					url: 'xilujob.task/my_intention',
					data: {},
					success: ret => {
						if(ret.data){
							this.formData = ret.data;
						}
					}
				});
			},
			bindGenderChange(id) {
				this.formData.gender = id;
			},
			bindTrainChange(id) {
				this.formData.is_train = id;
			},
			bindDistrictChange(event) {
				this.areaName = event.items.map(item => item.name).join(' - ');
				let selectedDistrict = event.items[0];
				this.formData.district_id = selectedDistrict.id;
				this.$forceUpdate();
			},
			bindFavDistrictChange(event) {
				this.favAreaName = event.items.map(item => item.name).join(' - ');
				let selectedDistrict = event.items[0];
				this.formData.fav_district_id = selectedDistrict.id;
				this.$forceUpdate();
			},
			bindCategoryChange(event) {
				let selectedCategory = event.items[0];
				this.formData.category_id = selectedCategory.id;
				this.$forceUpdate();
			},
			bindEducationLevelChange(event) {
				let selectedLevel = event.items[0];
				this.formData.education_id = selectedLevel.id;
				this.$forceUpdate();
			},
			bindWorkExperienceChange(event) {
				let selectedExperience = event.items[0];
				this.formData.work_experience_id = selectedExperience.id;
				this.$forceUpdate();
			},
			bindPropertyChange(event) {
				let selected = event.items[0];
				this.formData.properties_id = selected.id;
				this.$forceUpdate();
			},
			onSinglepage(type){
				uni.navigateTo({
					url: '/pages/public/singlepage?type='+type
				})
			},
			bindSubmit(event) {
				let data = this.formData;
				var rule = [{
						name: 'username',
						rules: ['require'],
						errorMsg: {
							require: '请填写姓名'
						}
					},
					{
						name: 'gender',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择性别',
							gt: '请选择性别'
						}
					},
					{
						name: 'mobile',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请填写手机号',
							mobile: '请填写正确的手机号'
						}
					},
					{
						name: 'idcard',
						rules: ['require'],
						errorMsg: {
							require: '请填写身份证号'
						}
					},
					{
						name: 'district_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择所在区县',
							gt: '请选择所在区县'
						}
					},
					{
						name: 'address',
						rules: ['require'],
						errorMsg: {
							require: '请填写详细地址'
						}
					},
					{
						name: 'fav_district_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择工作区域',
							gt: '请选择工作区域'
						}
					},
					{
						name: 'category_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择从事工种',
							gt: '请选择从事工种'
						}
					},

				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				this.$core.post({
					url: 'xilujob.task/add_intention',
					data: data,
					success: ret => {
						this.getOpenerEventChannel().emit('taskIntentionTransfer', {});
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success() {
								uni.navigateBack();
							}
						})

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 0 30rpx;

		.inp_item {
			height: 120rpx;

		}

		.inp_item+.inp_item {
			border-top: 1px solid #E7E7E7;
		}
	}

	.ico8 {
		width: 8rpx;
	}

	.box1 {
		width: 690rpx;
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;

		.inp_item+.inp_item {
			border-top: 1px solid #E7E7E7;
		}

		.inp_item {
			height: 110rpx;
		}

		.left {
			font-size: 30rpx;
			color: #333333;
		}

		.inp {
			text-align: right;
			padding-left: 30rpx;
			color: #333;
			font-size: 30rpx;
		}

		.switch {
			width: 122rpx;
			height: 53rpx;
			line-height: 53rpx;
			text-align: center;
			font-size: 30rpx;
			color: #666666;
			background: #EFF0F2;
			border-radius: 27rpx;

			&.ac {
				background: var(--primary);
				color: #FFFFFF;
			}
		}
	}

	.textarea {
		width: 100%;
		padding: 30rpx 0 0;
		font-size: 30rpx;
		color: #333333;
	}

	.btn {
		margin-top: 60rpx;
		width: 580rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background: var(--primary);
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.popup {
		background: #fff;

		.top_nav {
			height: 110rpx;
			padding: 0 30rpx;
			font-size: 35rpx;
			color: #333333;
			font-weight: bold;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
		}

		.left_scroll,
		.right_scroll {
			height: 70vh;
		}

		.left_scroll {
			background: rgba(216, 216, 216, 0.2);
			width: 267rpx;

		}

		.item {
			width: 100%;
			height: 104rpx;
			line-height: 104rpx;
			color: #333333;
			font-size: 26rpx;
			padding: 0 30rpx;
		}

		.item.active {
			background: #fff;
			color: var(--primary);
		}
	}
</style>